<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
    .aaa{
      background: red;
      height:50px;
      width:50px;
      margin:10px;
    }
  </style>
</head>
<body>
<body  >
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<div id="box1" class="aaa" draggable="true" ondragstart="drag(event)" data-name="aaa">1</div>
<div id="box2" class="aaa" draggable="true" ondragstart="drag(event)" data-name="bbb">2</div>
<div id="box3" class="aaa" draggable="true" ondragstart="drag(event)" data-name="ccc">3</div>
</body>
<script type="text/javascript">
  function allowDrop(ev)
  {
    ev.preventDefault();
  }

  function drag(ev)
  {
    ev.dataTransfer.setData("aaa",ev.target.id);

  }

  function drop(ev)
  {
    // ev.preventDefault();
    // ev.stopPropagation();
    var data=ev.dataTransfer.getData("aaa");
    var dom = document.getElementById(data);
    var mydiv = document.createElement("div");
    mydiv.innerHTML = dom.getAttribute("data-name");
    ev.target.appendChild(mydiv);
  }
</script>
</body>
</html>
